
<template>
	<!-- 赵笛 2023年4月4日 -->
	<!-- 商品详情 -->
	<view style="background:#F5F5F5">
		<u-notify :message="errorMessage" :type="type" :show="show"></u-notify>
		<u-navbar height="44px" title="商品详情" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<u-swiper height="320" class="swiper" :list="imgList" indicator indicatorMode="line" circular></u-swiper>
		<u-skeleton rowsHeight="20" rows="3" title :loading="lodingFlag"></u-skeleton>
		<view class="content-box">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="9">
					<view class="demo-layout bg-purple-light">
						<p>
							<span class="text-title" style="font-size:15px">{{commodityData.diyName}}</span>
							<!-- <span class="text-dark" style="margin-left:20px" v-for="t in commodityData.tag.split(',')">#{{t}}</span> -->
						</p>
						<p class="text-dark">{{commodityData.diyDetails}}</p>
					</view>
				</u-col>
				<u-col span="3">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="text-center">
								<u-icon name="star-fill" color="#3CCCA6" size="28"></u-icon>
							</view>
						</u-col>
						<u-col span="8">
							<view class="text-center" style="color:#3CCCA6;">
								<div style="font-weight:bold;">98.9%</div>
								<div>好评率</div>
							</view>
						</u-col>
					</u-row>

				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="8">
					<view>
						<span style="color:#E06181;font-weight: bold;">¥{{commodityData.diyFavorablePrice}}</span>
						<span class="text-light"
							style="text-decoration:line-through;margin-left:10px">¥{{commodityData.diyPrice}}</span>
					</view>
				</u-col>
				<u-col span="4" id="spec">
					<!-- <view class="text-light" style="text-align: right;">购买可得{{commodityData.number}}积分</view> -->
				</u-col>
			</u-row>
		</view>
		<view class="view-box" >
			<span class="text-title" style="font-size: 14px;">使用方式:</span>
			<span class="text-light" style="margin-left:10px">
				-到店：
			</span>
			<span class="text-light" style="margin-left:10px">
				-已选择：
				{{date}}
			</span>
			<u-icon name="arrow-right" style="float: right;margin-top: 4px;" @click="specWindowOpen(commodityData.id)"></u-icon>
		</view>
		<view class="view-box" style="height:24px">
			<span class="text-title" style="font-size: 14px;float:left;">注意:</span>
			<span style="font-size: 14px;float:left;  ">{{commodityData.detailsOfPurchaseInstructions}}</span>
		</view>
		<view  style="height:24px;line-height: 24px;background: #fff;margin-left:10px;" >
			<view class="text-title" style="font-size: 14px;float:left" id="address">服务：</view>
			<view class="text-light" v-for="service in serviceList" style="float:left;">
				<u-icon name="checkbox-mark" style="margin-top:4px;float:left;" color='#3CCCA6'></u-icon>
				<span style="float:left;">{{service}}</span>
			</view>
		</view>
		<view class="view-box" style="height:90px">
			<span class="text-title" style="font-size: 14px;float:left">商家地址：</span>
			<span>北京工商轉修管理學院</span>
			<view id="allmap" class="map"></view>
		</view>
		<view class="view-box">
			<p class="text-title">买家评论：</p>
			<view class="u-page" v-for="comment in commentList" :key="comment.id">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__avatar">
								<!-- <image :src="'http://101.43.223.224:8765/image/getImageById?id='+comment.avatarId" mode="" style="width: 32px;height: 32px;"></image> -->
								<image :src="comment.url" mode="" style="width: 32px;height: 32px;"></image>
							</view>
							<view class="album__content">
								<u--text class="text-title" :text="comment.name" bold size="14"></u--text>
								<p>
									<span class="text-dark" style="color: #E06181;font-size: 12px;">{{comment.createTime | dateFormat}}</span>
								</p>
								<p>
									<span style="float:left;;" class="text-light">商品描述：</span>
									<u-rate :value="comment.productDescriptionRating" active-color="#E06181" readonly style="float: left;">
									</u-rate>
								</p>
								<p>
									<span style="float:left;;" class="text-light">卖家态度：</span>
									<u-rate :value="comment.sellerAttitudeRating" active-color="#E06181" readonly style="float: left;">
									</u-rate>
								</p>
								<p>
									<span style="float:left;;" class="text-light">发货速度：</span>
									<u-rate :value="comment.shippingSpeedRating" active-color="#E06181" readonly style="float: left;">
									</u-rate>
								</p><span style="float:right" class="text-dark">{{comment.spec}}</span>
								<u--text margin="0 0 8px 0" size='14' color='#666666' :text="comment.content">
								</u--text>
								<u-album :urls="comment.commentImgList" keyName="src2"></u-album>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-button :plain="true" text="查看全部评论" style="margin-top:10px;" 
				v-show ="commentList.length !==0"></u-button>
			<u-empty
				mode="list"
				text="暂无评论"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
				v-show ="commentList.length ===0"
			>
			</u-empty>
		</view>
		<view class="view-box">
			<u-tabs @click="click" :activeStyle="{
            color: '#E06181'
        }" lineColor="#f56c6c" :list="[{name:'产品参数'},{name:'咨询与售后'}]" style="width:180px;margin: 0 auto;"></u-tabs>
			<u-empty
				mode="list"
				text="暂无产品参数"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
				v-show ="specList.length ===0"
			>
			</u-empty>
			<u-row customStyle="margin-bottom: 10px"
			v-show ="specList.length !==0"
			v-if="tagFlag" v-for="spec in specList"
				style="margin-bottom:20px;">
				<u-col span="1.3">
					<u-icon name="photo" color="#999999" size="28"></u-icon>
				</u-col>
				<u-col span="10.7">
					<p class="text-dark">{{spec.specName}}</p>
					<p class="text-light" style="margin-top:6px;">{{spec.specValue}}</p>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px" v-if="!tagFlag" 
				style="margin-bottom:20px;">
				<u-col span="12">
					咨询与售后
				</u-col>
			</u-row>
		</view>
		<view class="view-box">
			<u--image v-for="img in imgDetailList" :showLoading="true" :src="img" width="100%"></u--image>
		</view>
		<view class="view-box">
			<p>
				<span class="text-dark" style="float:left">该产品可能在附近体验</span>
				<span class="text-light" style="float:right">查看全部></span>
			</p>
			<u-scroll-list class="scroll-list-box">
				<view v-for="store in storeList" :key="store.id"
					style="margin:10px;box-shadow:0px 0px 3px 0px #3CCCA6;">
					<view class="image-box">
						<image :src="store.imgId"></image>
					</view>
					<view style="height:24px;line-height: 24px;">
						<span
							style="color:#333333;font-size:14px;float: left;margin-left: 6px;">{{store.storeName}}</span>
						<span style="float: right;margin-right: 6px;">
							<span style="color:#3CCCA6;float: right;">{{store.score}}</span>
							<u-rate :value="store.score" active-color="#3CCCA6" size="14"
								style="margin-top: 4px;float: right;" gutter="2" readonly></u-rate>
						</span>
					</view>
					<view class="text-light" style="float: left;height:20px;margin-left: 6px;">{{store.address}}</view>
				</view>
			</u-scroll-list>
		</view>
<!-- 
		<view class="bottom-nav">
			<u-icon name="home" size='38' class="icon-box" color="#CACACA"></u-icon>
			<u-icon name="kefu-ermai" size='36' class="icon-box" color="#CACACA"></u-icon>
			<u-icon name="shopping-cart" size='44' class="icon-box" color="#CACACA"></u-icon>
			<u-button text="立即付款" class="button-box" style="background:#E06181" @click="toOrderPage()" id="counter1"></u-button>
			<u-button id='counter' text="加入购物车" class="button-box" @click="addToShoppingCart"></u-button>
		</view> -->
		<!-- 底部栏 -->
		<view style="width: 100%;height: 50px;background:#fff;">
			<u-tabbar
				:value="value6"
				@change="name => value6 = name"
				:fixed="true"
				:placeholder="true"
				activeColor="grey"
				inactiveColor="black"
				:safeAreaInsetBottom="true"
				customStyle="margin-bottom:10px;">
				<u-tabbar-item @click="addCommodityCollection()" v-if="!starCheckFlag" style="margin-left: -10px;" text="收藏" icon="star"></u-tabbar-item>
				<u-tabbar-item icon="star-fill" color="#E06181" @click="addCommodityCollection()" v-if="starCheckFlag" style="margin-left: -10px;" text="收藏"></u-tabbar-item>
				<u-tabbar-item @click="toChatPage()" style="margin-left: -30px;" text="客服" icon="kefu-ermai" dot></u-tabbar-item>
				<u-tabbar-item @click="toShoppingCartPage" style="margin-left: -30px;" text="购物车" icon="shopping-cart"></u-tabbar-item>
				<u-button @click="addToShoppingCart" text="加入购物车" class="button-box" style="background:#FF8855;border-radius: 20px;color:#ffffff;width:200px;height:45px;margin-top:3px;margin-right:5px;"></u-button>
				<u-button @click="toOrderPage()" id='counter' text="立即付款" class="button-box" style="background:#FF4444;border-radius: 20px;width:200px;height:45px;margin-top:3px;color:#ffffff;margin-right:10px;"></u-button>
			</u-tabbar>
		</view>
		
		
		
	</view>
</template>
	<!-- 百度地图 -->
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=sSDsGEM2GCHbMM3DGk0696xKGuVWdTYo"></script>
<script type="module">
	// import times from '@/components/pretty-times/pretty-times.vue'
	// import {
	// 	mymap
	// } from '@/components/utils/map.js'
	var bmap = null;
	export default {
		data() {
			return {
				ak: 'sSDsGEM2GCHbMM3DGk0696xKGuVWdTYo',
				locationWatcherId:'',//监听器id
				maximumAge: 10 * 1000,//间隔时间10s
				//收藏状态
				starCheckFlag:false,
				//到店时间
				date:'',
				//当前登录用户id
				userId:1,
				//商品图片
				imgList: [],
				//商品图片
				imgDetailList: [],
				//当前商品
				DIYcommodityId: '',
				commodityData: {},
				//骨架框显示隐藏
				lodingFlag: true,
				//用户配送地址
				address: {},
				albumWidth: 0,
				//评论列表
				commentList: [],
				//规格列表
				specList: [],
				// 基本案列数据
				radiolist1: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: "111",
				tagFlag: true,
				storeList: [],
				//用于生成订单的商品信息
				commodityInfo:{},
				//选中的规格信息
				specChooseList:[],
				//当前用户地址列表
				userAddressList:[],
				//地址按钮样式
				addressButtonStyle:{
					border:'none'
				},
				addressId:0,
				addressButtonFlag:true,
				commodityNumber:1,
				show:false,
				errorMessage:'',
				type:'primary',
				serviceList:['七天可退换','退货返运费','满300包邮'],
				  latitude: 39.909, // 默认定在首都
				      longitude: 116.39742,
				      scale: 12, // 默认16
				      markers: [],
				      markerHeight: 30,
					  show: false,
				aa:{
						type: 'default',
						title: '默认主题',
						message: "锦瑟无端五十弦",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					}
			}
		},
		onLoad(option) {
				this.userId = wx.getStorageSync('user').id
				// console.log(this.userId, ':::this.userId')
			if(option.id!==undefined){
				
				this.DIYcommodityId = option.id
			}else{
				this.DIYcommodityId = 37
			}
			
			// ================百度地图==================

			this.date=wx.getStorageSync('date')
			this.getDIYCommodityById()
			this.getCommoditySpecById()
			this.getCommentByCommodityId()
			this.saveUserHistory()
			// this.getLocations();
		},
		methods: {
			// 查询有没有关注
			selectCollection(){
				this.$myRequest({
					url: '/commodityCollection/selectCollection',
					data: {
						userId:this.userId,
						commodityId:this.DIYcommodityId
					}
				}).then(res => {
					if(res.data.data === 1){
						this.starCheckFlag = true
					}else{
						this.starCheckFlag = false
					}
				})
			},
			addCommodityCollection(){
				//判断商品是否被收藏
				if(!this.starCheckFlag){
					//未收藏
					this.$myRequest({
						method:'POST',
						url: '/commodityCollection/insertCommodityCollection',
						data: {
							userId:this.userId,
							commodityId:this.DIYcommodityId
						}
					}).then(res => {
						if(res.data.flag){
							//收藏成功
							uni.showToast({
								icon: 'success',
								title: '收藏成功',
								// 显示时长时间为3秒
								duration: 3000,
							})
							this.starCheckFlag = true
							
							location.reload()
						}else{
							//收藏失败
							uni.showToast({
								icon: 'success',
								title: '收藏失败',
								// 显示时长时间为3秒
								duration: 3000,
							})
						
							location.reload()
						}
					})
				}else{
					//已收藏
					this.$myRequest({
						method:'POST',
						url: '/commodityCollection/deleteByUserIdAndDiyId',
						data: {
							userId:this.userId,
							commodityId:this.DIYcommodityId
						}
					}).then(res => {
						if(res.data.flag){
							//取消收藏成功
							uni.showToast({
								icon: 'success',
								title: '取消收藏成功',
								// 显示时长时间为3秒
								duration: 3000,
							})
							this.starCheckFlag = false
						
							location.reload()
						}else{
							//取消收藏失败
							uni.showToast({
								icon: 'success',
								title: '取消收藏失败',
								// 显示时长时间为3秒
								duration: 3000,
							})
							
							location.reload()
						}
					})
				}
			},
			//跳转至聊天页面
			toChatPage(){
				uni.navigateTo({
					url:'/pages/chat/ChatFrontView'
				})
			},
			//保存用户浏览历史
			saveUserHistory(){
						let historyData={
						// userId就是登陆用户的id
						 userId:this.userId,
						 // itemId是商品id
						 itemId:this.DIYcommodityId,
						 //商品
						 itemType:1
						}
						this.$myRequest({
						 url: '/commodity/detail/saveUserHistory',
						 method:'POST',
						 data: historyData
						}).then(res => {
						 if(res.data.flag){
							
						 }else{
							
						 }
						})
			},
			//跳转至订单页面
			toOrderPage(){
				//校验是否选择规格
				// if(this.specChooseList.length === this.specList.length){
					//已选择规格，校验是否选择地址
					// if(this.addressId!=0){
				if(this.date!=null){			
					let diyIds = []
					diyIds.push(this.commodityData.id)
		
						//已选择地址
					
						this.commodityInfo={
							userId:this.userId,
							commodityId:0,
							diyIds:diyIds,
							businessName:'乐工坊',
							number:this.commodityData.diyNumber,
							commodityPrice:this.commodityData.diyFavorablePrice,
							numbers:this.commodityData.diyNumber,
							serviceList:this.serviceList,
							isNoDiy:1,
						}
						let commodityInfo = encodeURIComponent(JSON.stringify(this.commodityInfo))
						uni.navigateTo({
							url: '/pages/diy/OrderDIYView?commodityInfo='+commodityInfo
						})
						}else{
							uni.showToast({
								icon: 'error',
								title: '请输入到店时间',
								// 显示时长时间为3秒
								duration: 3000,
							})
						}
					// }else{
					// 	//未选择地址（跳转至地址的位置）
					// 	//address是将要跳转区域的id
					// 	const returnEle = document.querySelector("#address") 
					// 	if (!!returnEle) { 
					// 		// true 是默认的
					// 		returnEle.scrollIntoView(true)
					// 	}
					// 	//这里的counter1是将要返回地方的id
					// 	document.querySelector("counter1").scrllIntoView(true)
					// }
				// }else{
				// 	//未选择规格（跳转至规格的位置，显示规格选择窗口）
				// 	this.toSpecAndOpenSpecWindows()
				// }
			},
			//加入购物车
			addToShoppingCart(){
			
				//校验是否选择规格（加入购物车功能不需要填写地址）
	
					if(this.date!==''){
						//已选择规格
						this.commodityInfo={
							userId:this.userId,
							commodityId:0,
							diyId:this.commodityData.id,
							businessName:'乐工坊',
							number:1,
							commodityPrice:this.commodityData.diyFavorablePrice,
							isNoDiy:1,
						}
					
						//将商品加入购物车
						this.$myRequest({
							url: '/shoppingCart/saveShoppingCart',
							method:'POST',
							data: this.commodityInfo
						}).then(res => {
							if(res.data.flag){
								//加入购物车成功，跳转至购物车页
							
							uni.showToast({
								icon: 'success',
								title: '加入购物车成功',
								// 显示时长时间为3秒
								duration: 3000,
							})
							}else{
								//加入购物车失败
								uni.showToast({
									icon: 'error',
									title: '加入购物车失败',
									// 显示时长时间为3秒
									duration: 3000,
								})
							}
						})
					}else{
						uni.showToast({
							icon: 'error',
							title: '请选择时间',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}
			
			
			},

			//根据id查询地址
			getAddressById(){
				if(this.addressId!=0){

					this.$myRequest({
						url: '/commodity/detail/getAddressById',
						data: {
							addressId: this.addressId
						}
					}).then(res => {
						if(res.data.flag){
							this.address = res.data.data
						
							this.addressButtonFlag = false
						}else{
							this.commentList = []
						}
					})
				}
			},

			//打开规格选择窗口
			specWindowOpen(id){
				uni.navigateTo({
					url: '/pages/diy/Date?id='+id
				})
			},
			//根据商品id查询当前商品的评论
			getCommentByCommodityId() {
				this.$myRequest({
					url: '/commodity/detail/getCommentByCommodityId',
					data: {
						commodityId: this.commodityId
					}
				}).then(res => {
					if(res.data.flag){
						this.commentList = res.data.data
						for (var i = 0; i < this.commentList.length; i++) {
							this.commentList[i].commentImgList =[]
							var imgIds = this.commentList[i].pictureGroup.split(',')
							for (var j = 0; j < imgIds.length; j++) {
								this.commentList[i].commentImgList.push('http://101.43.223.224:8765/image/getImageById?id='+imgIds[j])
							}
						}
					
					}else{
						this.commentList = []
					}
				})
			},
			//根据商品id查询当前商品属性
			getCommoditySpecById() {
				this.$myRequest({
					url: '/commodity/detail/getCommoditySpecById',
					data: {
						commodityId: this.commodityId
					}
				}).then(res => {
					if(res.data.flag){
						this.specList = res.data.data
					}else{
						this.specList = []
					}
				})
			},
			//根据id查询当前商品
			getDIYCommodityById() {
				this.$myRequest({
					url: '/handworkDiy/getHandworkDiyById',
					data: {
						id: this.DIYcommodityId
					}
				}).then(res => {
					this.commodityData = res.data.data
					this.imgList=[]
					this.imgDetailList=[]
					var imgIds = this.commodityData.diyDetailsImageId.split(',')
					for (var i = 0; i < imgIds.length; i++) {
						this.imgList.push('http://101.43.223.224:8765/image/getImageById?id='+imgIds[i])
					}
					// var imgDetailIds = this.commodityData.imageViewId.split(',')
					// for (var i = 0; i < imgDetailIds.length; i++) {
					// 	this.imgDetailList.push('http://101.43.223.224:8765/image/getImageById?id='+imgDetailIds[i])
					// }//骨架框
					this.lodingFlag = false
				
				})
			},
			click(item) {
				if (item.index === 0) {
					this.tagFlag = true
				} else {
					this.tagFlag = false
				}
				
			},
			//规格单选框改变时
			groupChange(index) {
				
				this.specChooseList[index] = this.specList[index].radiovalue
				
			},
			radioChange(n) {
				
			}
		}
	}
</script>
<style lang="scss" scoped>

	
		.global {
			width: 100%;
			height: 100%;
		}
	
	
	/**
	 * 公共样式 ↓
	 */
	.text-title {
		//文字标题样式
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.text-dark {
		//深色文字样式
		font-size: 14px;
		color: #666666;
	}

	.text-light {
		//浅色文字样式
		font-size: 14px;
		color: #999999;
	}

	.text-center {
		//居中文字样式
		text-align: center;
	}

	/**
	 * 公共样式 ↑
	 */

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper {
		height: 320px;
		margin-top: 40px;
		border: 1px solid #F1F2F4;
		background: white !important;
	}

	.content-box {
		background: #fff;
		padding: 10px;
		font-size: 14px;
		color: #333333;
		margin-bottom: 10px;
	}

	.content-box p {
		margin-bottom: 8px;
	}

	.view-box {
		line-height: 24px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
	}

	.uni-button:after {
		border: none;
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.u-page {
		margin-top: 10px;
	}

	.u-text .user-name-text {
		width: 200px
	}

	.scroll-list-box {
		margin-top: 10px;
		width: 100%
	}

	.image-box {
		width: 220px;
		height: 120px;
		overflow: hidden;
	}

	.bottom-nav {
		width: 100%;
		height: 60px;
		line-height: 60px;
		font-size: 14px;
		color: #ffffff;
		background: #ffffff;
		position: fixed;
		bottom: 0
	}

	.icon-box {
		width: 30px;
		height: 60px;
		line-height: 60px;
		float: left;
		margin: 0 10px;
	}

	.button-box {
		width: 100px;
		height: 60px;
		float: right;
		color: #ffffff;
		background: #3CCCA6;
		border: none;
		border-radius: 0;
	}
	.address-button-box:after {
		border: none;
	}
	.address-button-box {
		border:0
	}
	.button-box:after {
		border: none;
	}
	.popup-box{
		width:100%;
		height:100%;
		padding:20px;
	}
	.album__content p{
		width:100%;
		height:20px;
		line-height:20px;
	}
	.u-page{
		padding:10px 0;
		border-bottom: 1px solid #f5f5f5;
	}
</style>
